<template>
  <div id="app">
    <v-header :fruits="fruits"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link :to="{name: 'goods'}">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{name: 'ratings'}">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{name: 'seller'}">商家</router-link>
      </div>
    </div>
    <!-- vue 保留状态 缓存 keep-alive -->
    <keep-alive>
      <router-view :fruits="fruits"></router-view>
    </keep-alive>
  </div>
</template>

<script>

import header from './components/header/header.vue'
import {urlParse} from './common/js/util'
// const ERR_OK = 0

export default{
  data () {
    return {
      fruits: {
        id: (() => {
          let queryParam = urlParse()
          // console.log(queryParam)
          return queryParam.id
        })()
      }
    }
  },
  created () {
    this.axios.get('/api/seller?id=' + this.fruits.id)
      .then(res => {
        // this.fruits = res.data.data
        // console.log(this.fruits)

        // 上面的写法会覆盖 id （vue不嗯呢监测对象属性的添加，删除）, 使用 vue 的 set 可以动态添加单个 Object.assimg 添加多个
        // console.log(this.fruits.id)
        this.fruits = Object.assign({}, this.fruits, res.data.data)
      })
      .catch(err => {
        console.log(err)
      })
  },
  components: {
    'v-header': header
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

  @import "./common/stylus/mixin.styl"

  #app
    .tab
      display flex
      width 100%
      height 40px
      line-height 40px
      border-1px(rgba(7,17,21,.1))
      .tab-item
        flex 1
        text-align center
        & > a
          display block
          font-size 14
          color rgb(77,85,93)
          &.active
            color rgb(240,20,20)
</style>
